---
title: Quickstart
description: Get started with Jaspr and build your first website in Dart.
---

---

To get started with Jaspr, you can either use the **Jaspr CLI** or our official **VSCode Extension**. The cli lets you manage the project from the command line, while the extension provides a more integrated experience within your IDE.

## VSCode Extension

<Steps>
  <Step title="Install Extension">
    Install the Jaspr VSCode extension by searching for `Jaspr` in the extensions menu.
  </Step>
  <Step title="Create a Project">
    To create a new Jaspr project, open the command palette (`Ctrl+Shift+P`) and select **Jaspr: New Project**. You are ask to choose from several templates and set a project folder.

    ![New Project](https://github.com/schultek/jaspr/blob/main/modules/jaspr-code/media/screenshots/new_project.png?raw=true)

    <Info>
      Choosing a template will not lock you into a specific configuration. Starting from one template you can easily modify your code to behave as any other template along the way.
    </Info>

    When running for the first time, the extension will ask you to install the Jaspr CLI. This is required to run the Jaspr development server and build your project.
    
  </Step>
  <Step title="Debug your Jaspr Project">
    To run and debug a Jaspr applications, launch it using F5 or the Debug menu. The extension will start the debug process and attach the Dart debugger to it. 

    ---

    When developing a Jaspr project in `static` or `server` mode, this will open **two** separate debugging sessions, one for the server and one for the client. Switch between the two using the debugging sidebar or process dropdown.

    | Sidebar | Dropdown. |
    |---|---|
    | ![Sidebar](https://github.com/schultek/jaspr/blob/main/modules/jaspr-code/media/screenshots/sidebar.png?raw=true) | ![Dropdown](https://github.com/schultek/jaspr/blob/main/modules/jaspr-code/media/screenshots/dropdown.png?raw=true)

    Both processes will be managed by the main Jaspr terminal.

    ![Terminal](https://github.com/schultek/jaspr/blob/main/modules/jaspr-code/media/screenshots/terminal.png?raw=true)

    To stop the server, click "Stop Jaspr" in the status bar, or focus the terminal and press `Ctrl+C`. This will stop both debugging sessions and the main process.
    You can also detach the debugging sessions individually using the detach button in the debug bar, but this will keep the app running.

  </Step>
</Steps>

You can now start developing your website. 🎉

<Success>
  Observe that the browser automatically refreshes the page when you change something in your code, like the `Welcome` text.
</Success>

---

## Jaspr CLI
    
<Steps>
  <Step title="Install CLI">
    Install the Jaspr CLI via:

    ```js
    dart pub global activate jaspr_cli
    ```

    The `jaspr` command will be available in your terminal.
  </Step>
  <Step title="Create a Project">
    To create a new project run:

    ```
    jaspr create my_website
    ```

    This will walk you through the setup wizard and create a new Jaspr project inside the `my_website` folder.

    The cli will prompt you with a set of options to configure your project. You can read about what each option does [below](/get_started/quick_start#project-options) or just start with the recommended ones (simply press **Enter** each time).

    <Info>
        If you are just starting out and are not sure what options to pick, just select the default one for each question
        (simply press **Enter** each time).
    </Info>

    <Info>
        Choosing a set of options do not lock you into a specific configuration. Starting from one setup you can easily
        modify your code to behave as any other setup along the way.
    </Info>
  </Step>
  <Step title="Run the Development Server">
    Start the development server via:

    ```shell
    cd my_website
    jaspr serve
    ```

    This will spin up a development server at `localhost:8080`.
  </Step>
</Steps>

You can now start developing your website. 🎉

<Success>
  Observe that the browser automatically refreshes the page when you change something in your code, like the `Welcome` text.
</Success>

### Project Options

When creating a new project through the **Jaspr CLI**, you will go through a set of questions to configure the project to your liking. The options set your rendering mode, hydration strategy, routing, flutter interoperability strategy and more.

You can choose from the following options:

<Property name="Rendering Mode">
  Select one of the three rendering modes Jaspr supports. Read about the different modes [here](/get_started/modes).
</Property>

---

<Property name="Hydration" type="conditional">
  Select the hydration strategy (automatic or manual). Read about hydration [here](/concepts/hydration).
</Property>

---

<Property name="Routing">
  Whether to set up routing. Selecting **Yes** will setup a basic `Routing` with two routes ('/home' and '/about'). This gives you a convenient
  starting point when you plan to develop a website with multiple pages.
</Property>

---

<Property name="Multi-Page Routing" type="conditional">
  Whether to set up multi-page or single-page routing, also called server-side or client-side routing respectively. This defined how navigating
  between routes will behave. Either a "real" page load is performed when navigating to a new route (aka. the browser requests the new page using its url from the server).
  Or the routing happens purely on the client without any request to the server.

  <Info>
      There are different advantages and disadvantages for both types. To help you decide you can find many [articles](https://www.google.com/search?q=multi+page+vs+single+page+site) about this topic.
  </Info>

  Read more about routing [here](/concepts/routing).
</Property>

---

<Property name="Flutter Embedding">
  Whether to setup an embedded Flutter application with your site. This will use Jaspr's first-party integration for [Flutter element embedding](https://docs.flutter.dev/deployment/web#embedding-a-flutter-app-into-an-html-page) and create a simple Flutter counter app that synchronizes its state with your Jaspr site.
</Property>

---

<Property name="Plugin Support">
  Whether to enable support for Flutter web plugins. This will switch to Jaspr's custom compiler pipeline (replacing `build_web_compilers`) which allows the use of most Flutter web plugins in your Jaspr site without any additional setup.
  *Flutter web plugins* refers to any Flutter plugin from pub.dev that supports web and is not concerned with widgets or rendering. This includes packages like `shared_preferences` or `firebase`.
</Property>

---

<Property name="Custom Backend" type="conditional">
  Whether to use a custom backend package or framework for the server part of your project. You can choose between:
  - **None**: No backend setup. This is the default option and is recommended if you are just starting out.
  - **Shelf**: A simple and lightweight web server for Dart. This is a good choice if you want to build a custom backend for your project.
  - *More options coming soon*

  Read more about backends [here](/going_further/backend).
</Property>